<template>
  <div>
    <div class="Feature">
      <div class="Feature_title">
        <span class="Feature_title_span1">产品</span>
        <span class="Feature_title_span2">分类目录</span>
      </div>
      <div class="Leaderboard_data" v-for="(i,index) in LeaderboardData" :key="index">
        <p class="Leaderboard_data_p">{{ i.title }}</p>
        <div class="Leaderboard_data_class">
          <div class="Leaderboard_data_class_txt" v-for="(item,index1) in i.child" :key="index1">
            <img :src="item.url" alt="">
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Leaderboard",
  data() {
    return {
      LeaderboardData: [
        {
          title: '衣服·杂货',
          child: [
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/78a33e1f-78e5-42db-9f58-b7937f7dd756.jpg',
              name: '衣服·杂货'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/ef9cb3f3-e71c-46a7-9bda-3a38680955db.jpg',
              name: '男装'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/9cf58cdd-053e-49d0-b522-5ea0cfc387aa.jpg',
              name: '内衣'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/09891164-2500-482b-ab87-ce6ec43a91d4.jpg',
              name: '鞋·包'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/5762c0f1-d517-4239-ae58-4b0c12a78d9c.jpg',
              name: '服饰杂货'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/1738428c-165f-4fe7-8654-af3eb5471777.jpg',
              name: '童装'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/b33a1c94-ef6d-4f6d-a477-33e5660d715e.jpg',
              name: 'MUJI  LABO'
            },
          ]
        },
        {
          title: '生活杂货',
          child: [
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/5ce1b2ec-5b10-401d-82fc-3a9a09d42221.jpg',
              name: '卫生&美容用品'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/3f182e94-840e-429b-b5dd-e9bfdb99d101.jpg',
              name: '纺织品'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/c098314b-ea18-4299-9ccc-cf3c043dc718.jpg',
              name: '文具'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/d0855552-9e13-45ef-869e-0263855aa447.jpg',
              name: '居家用品'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/1c799144-28b3-4515-80a1-1d91d2da85fb.jpg',
              name: '家具'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/ee801a5e-2664-4d49-b5fa-609bc4d09e20.jpg',
              name: '电子产品'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/54ce96a5-e89f-4ced-95b2-887d9fa8f49e.png',
              name: '户外用品'
            }, {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/25a23c4f-980e-49b4-bb10-d4e758908c7f.jpg',
              name: 'MUJI IDEE'
            }, {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/f71a4c14-6c55-4f67-9c66-0b4a19ff1028.jpg',
              name: 'MUJI BOOKS'
            },
          ]
        },
        {
          title: '食品',
          child: [
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/210ca92c-16f6-475f-badd-616d18c17952.jpg',
              name: '点心'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/78eaa806-d5ff-4f87-aafc-ae6e6b8bd430.jpg',
              name: '饮料·冷食'
            },
            {
              url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/0eadda07-69af-400c-b29a-a35ece1546f4.jpg',
              name: '调味加工'
            }
          ]
        }
      ]
    }
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="less" scoped>
.Feature {
  width: 78%;
  margin: 0 auto;

  .Feature_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
    margin-top: 2%;

    .Feature_title_span1 {
      font-size: 21px;
      color: black;
      font-weight: bold;
    }

    .Feature_title_span2 {
      font-size: 16px;
      color: #60b3fa;
      font-weight: bold;
    }
  }

  .Leaderboard_data {
    width: 100%;
    height: auto;

    .Leaderboard_data_p {
      margin-top: 2%;
      margin-bottom: 2%;
      font-size: 17px;
      color: black;
      font-weight: bold;
    }

    .Leaderboard_data_class {
      display: flex;
      flex-wrap: wrap;

      .Leaderboard_data_class_txt {
        padding: 1.2%;
        margin-right: 4%;
        margin-bottom: 4%;
        width: 18%;
        border: 1px solid #e2dfdf;
        display: flex;
        align-items: center;

        img {
          width: 50px;
          height: 50px;
          margin-right: 4%;
        }

        p {
          font-size: 15px;
          color: black;
          font-weight: bold;
        }
      }
    }
  }
}
</style>